<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .v-enter {
                opacity: 0;
            }
            .v-enter-to{
                opacity: 1;
            }
            .v-enter-active{
                transition: all 3s;
            }

            .v-leave{
                opacity: 1;
            }
            .v-leave-to{
                opacity: 0;
            }
            .v-leave-active{
                transition: all 3s;
            }
        </style>
    </head>
    <body>
        <div id="app">
           <form>
               <input type="text" v-model="name">
               <input type="submit" value="添加" @click.prevent="add">
           </form>

            <transition-group appear tag="ul">
                <li v-for="(person, index) in persons" :key="person.id" @click="del(index)">
                    <input type="checkbox">
                    <span>{{index}}---{{person.name}}</span>
                </li>
            </transition-group>
  
        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"",
                    persons:[
                        {
                            name:"zs",
                            id:1
                        },
                        {
                            name:"ls",
                            id:2
                        },
                        {
                            name:"xs",
                            id:3
                        },
                    ],
                    ids : 3
                },
                methods: {
                    add(){
                        this.ids += 1
                        console.log(this.ids)
                    
                        let newPerson = {name:this.name, id:this.ids};
                        this.persons.unshift(newPerson)
                        this.name = ""

                    },
                    del(index){
                        this.persons.splice(index, 1);
                    }
                },
            });
        </script>
    </body>
</html>